<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<div fxLayout="column"
     [formGroup]="portMappingForm">
  <div fxLayout="row">
    <mat-form-field class="mat-block kd-deploy-input-row"
                    style="width: 100%;">
      <mat-select namespace="serviceType"
                  formControlName="serviceType"
                  i18n-placeholder
                  placeholder="Service"
                  required>
        <mat-option *ngFor="let serviceType of serviceTypes"
                    [value]="serviceType">
          {{serviceType.label}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <ng-container>
    <ng-container formArrayName="portMappings">
      <div fxLayout="row"
           *ngFor="let portMapping of portMappings.controls; let i = index;"
           [formGroupName]="i">
        <mat-form-field md-no-float
                        class="kd-deploy-input-row kd-port-form-field"
                        fxFlex="30">
          <input matInput
                 type="number"
                 name="port"
                 formControlName="port"
                 i18n-placeholder
                 placeholder="Port"
                 (change)="checkPortMapping(i)"
                 [required]="isFirst(i)">
          <mat-error *ngIf="portMapping.get('port').errors?.kdValidInteger"
                     i18n>
            Port must be an integer.
          </mat-error>
          <mat-error *ngIf="portMapping.get('port').errors?.required"
                     i18n>
            Port cannot be empty.
          </mat-error>
          <mat-error *ngIf="portMapping.get('port').errors?.min"
                     i18n>
            Port must be greater than 0.
          </mat-error>
          <mat-error *ngIf="portMapping.get('port').errors?.max"
                     i18n>
            Port must be less than 65536.
          </mat-error>
        </mat-form-field>

        <p fxFlex="5"></p>

        <mat-form-field md-no-float
                        class="kd-deploy-input-row kd-port-form-field"
                        fxFlex="30">
          <input matInput
                 type="number"
                 name="targetPort"
                 formControlName="targetPort"
                 i18n-placeholder
                 placeholder="Target port"
                 min="1"
                 max="65535"
                 (change)="checkPortMapping(i)"
                 [required]="isFirst(i)">
          <mat-error *ngIf="portMapping.get('targetPort').errors?.kdValidInteger"
                     i18n>
            Target port must be an integer.
          </mat-error>
          <mat-error *ngIf="portMapping.get('targetPort').errors?.required"
                     i18n>
            Target port cannot be empty.
          </mat-error>
          <mat-error *ngIf="portMapping.get('targetPort').errors?.min"
                     i18n>
            Target port must be greater than 0.
          </mat-error>
          <mat-error *ngIf="portMapping.get('targetPort').errors?.max"
                     i18n>
            Target port must be less than 65536.
          </mat-error>
        </mat-form-field>

        <p fxFlex="5"></p>

        <mat-form-field md-no-float
                        class="kd-deploy-input-row kd-port-form-field"
                        fxFlex="20">
          <mat-select name="protocol"
                      formControlName="protocol"
                      i18n-placeholder
                      placeholder="Protocol"
                      kdValidProtocol
                      [isExternal]="isExternal"
                      required>
            <mat-option *ngFor="let protocol of protocols"
                        [value]="protocol">{{protocol}}</mat-option>
          </mat-select>
          <mat-progress-bar class="kd-deploy-form-progress"
                            [ngClass]="{'kd-deploy-form-progress-show': portMapping.get('protocol').pending}"
                            mode="indeterminate">
          </mat-progress-bar>
          <mat-error *ngIf="portMapping.get('protocol').errors?.required"
                     i18n>
            Protocol is required.
          </mat-error>
          <mat-error *ngIf="portMapping.get('protocol').errors?.validProtocol"
                     i18n>
            Invalid protocol.
          </mat-error>
        </mat-form-field>

        <div fxFlex="10">
          <button mat-icon-button
                  *ngIf="isRemovable(i)"
                  (click)="remove(i)">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
